<template>
	<!-- <view class="main-class"> -->
	<z-paging ref="paging" v-model="orderData" @query="queryList" class="order-container">
		<template #top>	
		<tn-sticky>
			<view class="header-class">
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>			
				<tn-navbar height="45px" back-icon=""  home-icon="left" :bottom-shadow="false" bg-color="tn-type-primary_bg" text-color="tn-white">待审批订单</tn-navbar>
				<view class="search-box-wrapper">
					<tn-search-box
						v-model="searchValue"
						@input="searchInputEvent"
						@search="searchBtnClickEventPage"
						size="sm"
						placeholder="搜索关键词,检索客户"
						placeholder-icon="search"
						border-color="#FFFFFF"
						text-color="#FFFFFF"
						placeholder-color="#FFFFFF"
						class="search-box"
						search-button-bg-color="#6babf3"
						shape="round"
					/>
				</view>
			</view>
			<view class="date-range" @click="openCalendarPopup">
				<view class="date-picker-title">
					<tn-icon name="calendar" size="32" color="#666666"></tn-icon>
					<text class="picker-text">时间选择</text>
				</view>
				<text class="date-text">{{dataInfo.startDate}} 至 {{dataInfo.endDate}}</text>
			</view>
		</tn-sticky>
		</template>
		<view class="order-list">
			<view class="order-item" v-for="item in orderData" :key="item.billcode">
				<view class="order-header" @click="toNavigate(item)">
					<view class="business-name tn-text-ellipsis-2">
						{{item.businessname}}
					</view>
					<view class="order-status">
						{{item.orderstate}}
					</view>	
				</view>
				<view class="order-info" @click="toNavigate(item)">
					<view class="bill-code">
						{{item.billcode}}
					</view>	
					<view class="order-date">
						{{item.dates}}
					</view>
				</view>
				<view class="order-summary" @click="toNavigate(item)">
					<view class="variety-count">
						品种数：<text class="highlight-text">{{item.ordernum}}</text>
					</view>
					<view class="amount">
						金额：<text class="highlight-text">{{item.taxamount}}</text>
					</view>	
				</view>
				<view class="operator-info" @click="toNavigate(item)">
					操作员：<text class="highlight-text">{{item.caozyname}}</text>
				</view>
				<view class="order-remark" v-if="item.remark" @click="toNavigate(item)">
					<text class="remark-label">备注：</text>
					<text class="remark-content">{{item.remark}}</text>
				</view>
			</view>
		</view>
	</z-paging>
	<!-- </view> -->
	
	
	
	<tn-popup v-model="showCalendarPopup" open-direction="top" class="popup-class">
		<view class="calendar-container">
			<view class="calendar-header">
				<text class="calendar-title">选择日期范围</text>
				<tn-icon name="close" size="40" @click="showCalendarPopup = false"></tn-icon>
			</view>
			<tn-calendar 
				v-model="selectDate" 
				min-date="2024-01-01" 
				mode="range" 
				class="calendar-class"
				:active-color="'#6babf3'"
			/>
			<view class="calendar-footer">
				<view class="selected-range" v-if="selectDate && selectDate.length === 2">
					<text>已选择：{{selectDate[0]}} 至 {{selectDate[1]}}</text>
				</view>
				<tn-button
					type="primary"
					width="80%"
					size="lg"
					class="confirm-button"
					@click="closeCalendarPopupPage"
				>
					确认选择
				</tn-button>
			</view>
		</view>
	</tn-popup>
	
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue'
	import { postCall  } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import { createParams } from '@/utils/utils.js'
	import md5 from "js-md5";
	import dayjs from "dayjs";
	import Big from 'big.js';
	
	const procName = "PROC_APP_DO_ORDER";
	const selectDate = ref('')
	const searchValue = ref("")
	const currentSwiperIndex = ref(1)
	const currentTabsIndex = ref(0)
	const userInfo = reactive({});
	let index = 0;
	const showCalendarPopup = ref(false)
	
	const openCalendarPopup = () => {
	  showCalendarPopup.value = true
	}
	
	// let back = (val) =>{
	// 	uni.navigateTo({
	// 		url: '/pages/index/index'
	// 	})
	// 	return true;
	// }
	
	const paging = ref(null)
	
	let pageInfo = {
		P_PAGE : 1 ,
		P_PAGESIZE : 10
	}
	
	const  queryList = (pageNo, pageSize) =>{
		pageInfo.P_PAGE = pageNo;
		pageInfo.P_PAGESIZE = pageSize;	
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "UNEND";
		params["P_CON"] = searchValue.value;
		postCall(Object.assign(Object.assign(params,createParams(dataInfo)),pageInfo)).then(res=>{
			if(res){
				if(res.code===200 || res.code===1000){
							   // Object.assign(orderData,res.data.DATASET);	   
							   // console.log(statusData);
							   paging.value.complete(res.data.DATASET);
				}
			}
		   
		}).catch(res =>{
			paging.value.complete(false);
		})
	}
	
	const searchBtnClickEventPage = () =>{
		paging.value.reload();
	}
	
	const closeCalendarPopupPage = () =>{
		showCalendarPopup.value = false
		let date = {
						"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
						"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
					}
		Object.assign(dataInfo,date);
		paging.value.reload();
	}
	
	
	const closeCalendarPopup = () => {
	  showCalendarPopup.value = false
	  console.log(selectDate.value);
	  let date = {
	  				"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
	  				"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
	  			}
	   Object.assign(dataInfo,date);
	   doGetOrder();
	}
	
	const searchInputEvent = ()=>{
		
	}
	const searchBtnClickEvent = ()=>{
		
	}
	const dataInfo = reactive({"startDate":"2024-01-01","endDate":"2024-04-31"})
	let loginInfo = {};
	
	onMounted(()=>{
		loginInfo = uni.getStorageSync("LOGINUSER");
		const firstDayOfMonth = dayjs().startOf('month');
		let date = {
						"startDate":firstDayOfMonth.format('YYYY-MM-DD'),
						"endDate":dayjs().format("YYYY-MM-DD")
					}
		Object.assign(dataInfo,date);
		index = 0;
		// doGetOrder();
	})
	const statusData = reactive([])
	
	const orderData = ref([]);
	const doGetOrder = (val) =>{
		
		console.log(currentTabsIndex.value);
		orderData.length = 0;
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "UNEND";
		postCall(Object.assign(params,createParams(dataInfo))).then(res=>{
			if(res){
				if(res.code===200){
							   Object.assign(orderData,res.data.DATASET);	   
							   // console.log(statusData);
				}
			}
		  
		})
	}
	
	let toNavigate = (val) =>{
		let tempOrderData  = [];
		let convertOrderData = [];
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "DETAIL";
		params["P_BILLNO"] = val.billno;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
				   Object.assign(tempOrderData,res.data.DATASET);	   
				   // console.log(statusData);
				   const mergedData = tempOrderData.reduce((acc, cur) => {
					   const { billno,billcode, businessname,recemanname,address,recetelephone,caozyname,kdcode,body,accesstoken,tradeid,remark,isht, ...rest } = cur;
					   if (!acc[billcode]) {
						   acc[billcode] = { billno,billcode, businessname,recemanname,address,recetelephone,caozyname,kdcode,body,accesstoken,tradeid,remark,isht, details: [rest] };
					   } else {
						   acc[billcode].details.push(rest);
					   }
					   return acc;
				   }, {});
				   
				   const businessStats = {};
				   for (const key in mergedData) {
					   const business = mergedData[key];
					   const totalPrice = business.details.reduce((total, item) => new Big(total).plus(new Big(item.sumtaxamount)), 0);
							mergedData[key]["taxamount"] = totalPrice;
					   }
					for (const key in mergedData) {
						if (Object.hasOwnProperty.call(mergedData, key)) {

						   convertOrderData.push(mergedData[key]);
						}
					 }
		
					uni.setStorageSync("ORDERINFO",convertOrderData[0]) 
					uni.navigateTo({
						url: '/pages/order/unorderdetails'
					})
				}
			}
		   
		})
	}
	
</script>

<style>
.order-container {
	background-color: #f5f7fa;
}

.header-class {
	background: var(--tn-color-primary);
	padding-bottom: 15rpx;
}

.search-box-wrapper {
	padding: 20rpx 30rpx;
}

.search-box {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 40rpx;
}

.date-range {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background: #fff;
	border-bottom: 2rpx solid #f0f0f0;
}

.date-picker-title {
	display: flex;
	align-items: center;
}

.picker-text {
	margin-left: 12rpx;
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.date-text {
	color: #666;
	font-size: 28rpx;
}

.order-list {
	padding: 20rpx;
}

.order-item {
	background: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.business-name {
	flex: 1;
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	padding-right: 20rpx;
}

.order-status {
	font-size: 28rpx;
	color: var(--tn-color-primary);
	font-weight: bold;
}

.order-info {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	font-size: 28rpx;
}

.bill-code {
	color: #666;
}

.order-date {
	color: #999;
}

.order-summary {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-top: 2rpx solid #f0f0f0;
	font-size: 28rpx;
}

.operator-info {
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
	border-top: 2rpx solid #f0f0f0;
}

.highlight-text {
	color: #ff6b6b;
	font-weight: 500;
	margin-left: 8rpx;
}

.order-remark {
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
	border-top: 2rpx solid #f0f0f0;
}

.remark-label {
	color: #999;
}

.remark-content {
	color: #666;
}

.popup-class {
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
	background: #fff;
}

.calendar-container {
	padding: 30rpx 0;
	background: #fff;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx 30rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.calendar-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.calendar-class {
	padding: 30rpx 0;
}

.calendar-footer {
	padding: 30rpx;
	border-top: 2rpx solid #f5f5f5;
}

.selected-range {
	text-align: center;
	color: #666;
	font-size: 28rpx;
	margin-bottom: 30rpx;
}

.confirm-button {
	margin: 0 auto;
	border-radius: 40rpx;
}
</style>
